<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="/lib/jquery/jquery.js"></script>
	<title>TAB切换</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			background-color: #131510;
		}
		.main{
			width: 500px;
			height: 300px;
			margin: 0 auto;
			margin-top: 15px;
		}
		ul{
			background-color: #656863;
		}
		ul li{
			width: 50px;
			height: 20px;
			list-style: none;
			border-right: 1px solid red;
			text-align: center;
			background-color: green;
			float: left;
			cursor: pointer;
		}
		li:hover{
			font-size: 16px;
			background-color: blue;
		}
		.contain{
			width: 500px;
			height: 300px;
			background-color: #367365;
			float: left;
		}
	</style>
</head>
<body>
	<div class="main">
		<ul>
			<li onclick="hid(0)"><a href="#">aaa1</a></li>
			<li onclick="hid(1)">bbb</li>
			<li onclick="hid(2)">ccc</li>
		</ul>
		<div class="contain" style="display: block">1111111110</div>
		<div class="contain" style="display: none">2222222222</div>
		<div class="contain" style="display: none">3333333333</div>
	</div>
	<script>
		function hid(a){
			// alert(a);
			// console.log(typeof(a));
			// 所有的div隐藏，开启第a 个div
			$('.contain').css("display","none");
			switch (a) {
				case 0:
				// console.log(a)
					$('.contain:eq(0)').css("display","block");
					break;
				case 1:
					$('.contain:eq(1)').css("display","block");
					break;	
				case 2:
					$('.contain:eq(2)').css("display","block");
					break;
			}
		}
	</script>
</body>
</html>